<script setup lang="ts">
import { uploadAPI } from '@/apis/common';
import {  createEnterpriseAPI, getIndustryListAPI } from '@/apis/enterprise';
import type { EnterpriseParams, Industry } from '@/types/enterprise';
import { CircleCheck, Upload } from '@element-plus/icons-vue';
import { ElMessage,  type FormInstance,  type FormRules,  type UploadRawFile, type UploadRequestOptions, type UploadUserFile } from 'element-plus';
// import { get } from 'node_modules/axios/index.cjs';
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';

// 工作时，需根据接口文档定义字段
const addForm = ref<EnterpriseParams>({
    name: '', // 企业名称
    legalPerson: '', // 法人
    registeredAddress: '', // 注册地址
    industryCode: undefined, // 所在行业
    contact: '', // 企业联系人
    contactNumber: '', // 联系人电话
    businessLicenseUrl: '', // 营业执照url
    businessLicenseId: 0 // 营业执照id
})

const formrules = ref<FormRules<EnterpriseParams>>({
    name: [
        { required: true, message: '请输入企业名称', trigger: 'blur' },
        { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
    ],
    legalPerson: [
        { required: true, message: '请输入法人', trigger: 'blur' },
        { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
    ],
    registeredAddress: [
        { required: true, message: '请输入注册地址', trigger: 'blur' },
        { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
    ],
    industryCode: [
        { required: true, message: '请选择行业', trigger: 'change' }
    ],
    contact: [
        { required: true, message: '请输入企业联系人', trigger: 'blur' },
        { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
    ],
    contactNumber: [
        { required: true, message: '请输入联系人电话', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
    ],
    businessLicenseUrl: [
        { required: true, message: '请上传营业执照', trigger: 'blur' }
    ]
    
})
const industryList = ref<Industry[]>([])

const getIndustrylist = async() => {
    const res = await getIndustryListAPI()
    industryList.value = res.data
}
getIndustrylist()
//接受上传图片数量
const fileList=ref<UploadUserFile[]>([])
const onUploadRequest = async (options: UploadRequestOptions)=>{
   console.log('options',options);
    //1.准备FormData对象
    const fd = new FormData()
    //2.根据后端要求准备字段
    fd.append('file', options.file)
    fd.append('type', 'businessLicense')
    //3.调用接口上传文件
    const res = await uploadAPI(fd)
    //保存营业执照url和id,用于添加企业
    addForm.value.businessLicenseUrl = res.data.url
    addForm.value.businessLicenseId = res.data.id

    console.log('res',res);
    return res.data.url
}

const formRef = ref<FormInstance>()

const router = useRouter()
//定义加载中的按钮
const submitLoading=ref(false)
//确认提交 整个表单校验
const onsubmit = async () => {
    try {
        await formRef.value?.validate()
        //把按钮设置为加载状态 禁用提交 避免重复提交
        submitLoading.value = true
        //提交表单数据给后端
        await createEnterpriseAPI(addForm.value)
        //轻提示
        ElMessage.success('添加成功')
        //返回上一页
        router.back()
    } catch {
        //恢复按钮状态
        submitLoading.value = false
    }
}
//重置表单
const onReset = () => {
    formRef.value?.resetFields()
}
const beforeUpload = (rawFile: UploadRawFile) => {
    console.log('rawFile',rawFile);
    //size的单位是Byte
    //5M= 5*1024*1024
    if (rawFile.size > 5 * 1024 * 1024) {
        ElMessage.error('文件大小不能超过5M')
        return false
    } else if (['image/jepg', 'image/png'].includes(rawFile.type) === false) {
        ElMessage.error('文件类型只能是.jpeg,.png,.jpg')
        return false
    }
    return true
}

//删除上传文件
const removeUpload = () => {
    //主动清除营业执照
    addForm.value.businessLicenseUrl = ''
    addForm.value.businessLicenseId = undefined
    formRef.value?.validateField('businessLicenseUrl')
}

//回显

// const route = useRoute()
// if (route.params.id) {
//     getbianji()
// }
</script>

<template>
    <div class="add-enterprise">
        <header class="add-header">
            <el-page-header content="添加企业" @back="$router.back()" />
        </header>
        <main class="add-main">
            <div class="form-container">
                <div class="title">企业信息</div>
                <div class="form">
                    <el-form ref="formRef" label-width="100px" :rules="formrules" :model="addForm">
                        <el-form-item label="企业名称" prop="name">
                            <el-input v-model="addForm.name" />
                        </el-form-item>
                        <el-form-item label="法人" prop="legalPerson">
                            <el-input v-model="addForm.legalPerson" />
                        </el-form-item>
                        <el-form-item label="注册地址" prop="registeredAddress">
                            <el-input v-model="addForm.registeredAddress" />
                        </el-form-item>
                        <el-form-item label="所在行业" prop="industryCode">
                            <el-select v-model="addForm.industryCode" clearable>
                                <el-option v-for="item in industryList" :key="item.industryCode"
                                    :label="item.industryName" :value="item.industryCode" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="企业联系人" prop="contact">
                            <el-input v-model="addForm.contact" />
                        </el-form-item>
                        <el-form-item label="联系电话" prop="contactNumber">
                            <el-input v-model="addForm.contactNumber" />
                        </el-form-item>
                        <el-form-item label="营业执照" prop="businessLicenseUrl">
                            <el-upload :http-request="onUploadRequest" list-type="picture" :limit="1"
                                v-model:file-list="fileList" :before-upload="beforeUpload" accept=".png,.jpg,.jpeg"
                                @remove="removeUpload">
                                <el-button v-if="fileList.length===0" type="primary" :icon="Upload">点击上传</el-button>
                                <el-button v-else type="success" disabled :icon="CircleCheck">已上传</el-button>
                                <template #tip>
                                    <div class="el-upload_tip">
                                        支持扩展名:.png .jpg .jpeg 文件大小不得超过5M
                                    </div>
                                </template>
                            </el-upload>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </main>
        <footer class="add-footer">
            <div class="btn-container">
                <el-button @click="onReset()">重置</el-button>
                <el-button type="primary" @click="onsubmit()" :loading="submitLoading">确定</el-button>
            </div>
        </footer>
    </div>
</template>


<style scoped lang="scss">
.add-enterprise {
    background-color: #f4f6f8;
    height: 100vh;

    .add-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
        height: 64px;
        line-height: 64px;
        font-size: 16px;
        font-weight: bold;
        background-color: #fff;

        .left {
            span {
                margin-right: 4px;
            }

            .arrow {
                cursor: pointer;
            }
        }

        .right {
            text-align: right;
        }
    }

    .add-main {
        background: #f4f6f8;
        padding: 20px 130px;

        .form-container {
            background-color: #fff;

            .title {
                height: 60px;
                line-height: 60px;
                padding-left: 20px;
            }

            .form {
                margin-bottom: 20px;
                padding: 20px 65px 24px;

                .el-form {
                    display: flex;
                    flex-wrap: wrap;

                    .el-form-item {
                        width: 50%;
                    }
                }
            }
        }
    }

    .add-footer {
        position: fixed;
        bottom: 0;
        width: 100%;
        padding: 24px 50px;
        color: #000000d9;
        font-size: 14px;
        background: #fff;
        text-align: center;
    }
}
</style>